import React from 'react'
import { Form, Input, Button, Space } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import styles from './index.less'

const layout = {
  labelCol: { span: 0 },
  wrapperCol: { span: 16 },
}

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
}
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
}

const Compute: React.FunctionComponent = () => {
  const onFinish = (values: any) => {
    const { count, candidates } = values
    const result = combinationSum(candidates, count)
    console.log('result', result)
  }

  const combinationSum = (list: [string], count: string) => {
    const candidates = list.map((item: string) => parseFloat(item) * 100)
    const target = parseFloat(count) * 100
    console.log(candidates, target)
    // 由大到小排序
    candidates.sort((a, b) => b - a)

    let res: any[] = [],
      path: never[] = []
    let len = candidates.length,
      minNum = candidates[len - 1]
    // 缓存长度

    get_combin(candidates, target, 0, path)

    function get_combin(
      candidates: number[],
      target: number,
      start: number,
      path: any[],
    ) {
      if (target == 0) {
        return res.push(path.slice())
      }

      if (target < minNum) return

      for (let i = start; i < len; i++) {
        path.push(candidates[i])
        get_combin(candidates, target - candidates[i], i, path)
        path.pop()
      }
    }

    const result = res.filter(arr => [...new Set(arr)].length === arr.length)
    return result
  }

  return (
    <div className={styles.page}>
      <header>
        <title>数据求和工具 V1.0.0</title>
      </header>
      <div className={styles.content}>
        <Form.Item {...formItemLayoutWithOutLabel}>
          <h2 style={{ marginTop: '50px' }}>数据求和工具v1.0.0</h2>
        </Form.Item>
        <Form onFinish={onFinish}>
          <Form.Item
            {...formItemLayout}
            name="count"
            label="数据之和"
            rules={[{ required: true, message: '数据之和不能为空！' }]}
          >
            <Input type="number" style={{ width: '60%' }} />
          </Form.Item>
          <Form.List name="candidates">
            {(fields: any[], { add, remove }: any) => {
              return (
                <div>
                  {fields.map((field, index) => {
                    console.log(fields)
                    return (
                      <Form.Item
                        {...(index === 0
                          ? formItemLayout
                          : formItemLayoutWithOutLabel)}
                        label={index === 0 ? '数据条目' : ''}
                        required={false}
                        key={field.key}
                        validateTrigger={['onChange', 'onBlur']}
                      >
                        <div style={{ display: 'flex' }}>
                          <div style={{ width: '60%' }}>
                            <Form.Item {...field}>
                              <Input type="number" />
                            </Form.Item>
                          </div>
                          <div style={{ width: '40%' }}>
                            {fields.length > 1 ? (
                              <MinusCircleOutlined
                                onClick={() => {
                                  remove(field.name)
                                }}
                                style={{ marginLeft: '20px' }}
                              />
                            ) : null}
                          </div>
                        </div>
                      </Form.Item>
                    )
                  })}
                  <Form.Item {...formItemLayoutWithOutLabel}>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add()
                      }}
                      block
                      style={{ width: '60%' }}
                    >
                      <PlusOutlined /> 增加数据
                    </Button>
                  </Form.Item>
                </div>
              )
            }}
          </Form.List>
          <Form.Item {...formItemLayoutWithOutLabel}>
            <Button type="primary" htmlType="submit" style={{ width: '60%' }}>
              计算
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Compute
